<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
    <title>壹脉智能CRM</title>
    <!-- Bootstrap Core CSS -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <!-- <link href="../assets/node_modules/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet"> -->

    <!-- <link href="../assets/node_modules/sweetalert/sweetalert.css" rel="stylesheet" type="text/css"> -->


    <!-- This page CSS -->
    <!-- chartist CSS -->
    <!-- <link href="../assets/node_modules/morrisjs/morris.css" rel="stylesheet"> -->
    <!--c3 CSS -->
    <!-- <link href="../assets/node_modules/c3-master/c3.min.css" rel="stylesheet"> -->
    <!--Toaster Popup message CSS -->
    <!-- <link href="../assets/node_modules/toast-master/css/jquery.toast.css" rel="stylesheet"> -->
    <!-- Custom CSS -->
    <link href="css/style.min.css" rel="stylesheet">
    <!-- Dashboard 1 Page CSS -->
    <!--<link href="css/pages/dashboard1.css" rel="stylesheet">-->
    <!-- You can change the theme colors from here -->
    <link href="css/colors/default.css" id="theme" rel="stylesheet">
    <link rel="stylesheet" href="css/diy.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      .contents {
        display: -webkit-box;
        display: flex;
        -webkit-box-align: start;
        align-items: flex-start;
      }
      .operate {
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: end;
        justify-content: flex-end;
        -webkit-box-align: center;
        align-items: center;
      }




    </style>
</head>

<body class="fix-header fix-sidebar card-no-border">
<div class="preloader">
    <div class="loader">
        <div class="loader__figure"></div>
        <p class="loader__label">壹脉</p>
    </div>
</div>
<div id="main-wrapper">
    <header class="topbar">
        <nav class="navbar top-navbar navbar-expand-md navbar-light">
            <div class="navbar-header">
                <a class="navbar-brand" href="../index.html">
                    <b>
                        <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo"/>
                        <!--<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo"/>-->
                    </b>
                    <span>
                        <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
                    </span>
                </a>
            </div>
            <div class="navbar-collapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a> </li>
                    <li class="nav-item"> <a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a> </li>
                </ul>
                <user-head></user-head>
            </div>
        </nav>
    </header>
    <aside class="left-sidebar">
        <div class="scroll-sidebar">
            <company-position></company-position>
            <nav class="sidebar-nav p-0">
                <c-slider current="12"></c-slider>
            </nav>
        </div>
    </aside>
    <div class="page-wrapper">

        <div class="container-fluid">

            <div class="row page-titles">
                <div class="col-md-5 align-self-center">
                    <h3 class="text-themecolor">文章管理</h3>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
                        <li class="breadcrumb-item ">文章管理</li>
                        <li class="breadcrumb-item active">发布文章</li>
                    </ol>
                </div>
            </div>

            <!--form-->
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <form action="#">
                                <div class="form-body col-md-6">
                                    <div class="d-flex align-cen m-b-19">
                                        <span class="control-label required col-3">
                                            文章标题
                                        </span>
                                        <input v-if="status!='info'" type="text" id="name" class="form-control phgray" v-model="clientForm.title" placeholder="文章标题">
                                        <span v-else class="control-label col-9">
                                            {{clientForm.title}}
                                        </span>
                                        <el-button @click="dialogFormVisible = true" class="btncss">链接转换</el-button>
                                    </div>
                                    <div class="d-flex align-cen m-b-19">
                                        <span class="control-label col-3">
                                          文章来源
                                        </span>
                                        <input v-if="status!='info'" type="text" id="password" class="form-control phgray" v-model="clientForm.originAuthor" placeholder="文章来源">
                                        <span v-else class="control-label col-9">
                                          {{clientForm.originAuthor }}
                                        </span>

                                    </div>
                                    <div class="contents align-cen m-b-19">
                                        <span class="control-label required col-3">
                                            文章分类
                                        </span>
                                        <el-select v-model="clientForm.essayTypeId" placeholder="请选择">
                                            <el-option
                                                    v-for="item in options"
                                                    :key="item.id"
                                                    :label="item.name"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>
                                        <a href="customerEssayType.html"><el-button class="btncss">新建分类</el-button></a>
                                    </div>
                                    <div class="d-flex m-b-19">
                                        <span class="control-label required col-3">
                                            文章封面
                                        </span>
                                        <div class="disflex wrap">
                                            <div v-if="clientForm.photos" class="goods-img w100 h100 m-r-5 m-b-5 bradius4 position-relative"
                                            :style="'background-image: url('+clientForm.photos+')'">
                                                <img @click.stop="delPic(clientForm)"
                                                     class="del-goods-pic w20"
                                                     src="https://you-one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crmpc/2f2fbcd8d2b2177e884423142be14ac.png">
                                            </div>
                                            <label v-if="!clientForm.photos" class="w100 h100 bradius4 textc bced m-r-20 position-relative ohidden icon-plus bradius4">
                                                <input type="file" class="hide" id="file" ref="file" @change="upLoadLogo">
                                            </label>
                                        </div>
                                    </div>


                                    <div class="contents align-cen m-b-19">
                                        <span class="control-label required col-3">
                                            文章内容
                                        </span>
                                        <div id="editor" style="width: 800px" v-if="status!='info'" ></div>
                                        <p class="control-label col-9" v-else v-html="clientForm.details"></p>
                                    </div>

                                    <div class="contents align-cen m-b-19">
                                        <span class="control-label required col-3">
                                            是否发布
                                        </span>
                                            <el-switch
                                                    v-model="clientForm.isDrafts "
                                                    active-text="发布"
                                                    inactive-text="关闭">
                                            </el-switch>
                                    </div>


                                    <div class="operate">
                                        <button type="button" @click="cancel" class="p-l-20 p-r-19 m-r-10 btn btn-outline-secondary">取消</button>
                                        <button v-if="status!='info'" type="button" class="p-l-20 p-r-19 m-r-10 btn btn-outline-secondary" @click="saveChange(0)">保存到草稿箱</button>
                                        <span v-if="status!='info'" class="p-l-20 p-r-19 m-r-10 textc btn-success cfff bradius4 curpointer lh40" :class="{disabled: loading}" @click="saveChange(1)">发布</span>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <el-dialog title="链接转换" :rules="rules" ref="form" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="网站地址"  prop="address" :label-width="formLabelWidth">
                        <el-input v-model="form.address" ></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button  class="btncss" @click="submitData('form')" >转换</el-button>
                </div>
            </el-dialog>

        </div>

    </div>

    </div>

</div>

<!-- All Jquery -->
<!-- ============================================================== -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap popper Core JavaScript -->
<!-- <script src="../assets/node_modules/bootstrap/js/popper.min.js"></script> -->
<script src="js/bootstrap.min.js"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<!-- <script src="js/perfect-scrollbar.jquery.min.js"></script> -->
<!--Wave Effects -->
<!-- <script src="js/waves.js"></script> -->
<!--Menu sidebar -->
 <script src="js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="js/custom.min.js"></script>
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============================================================== -->
<!--morris JavaScript -->
<!-- <script src="../assets/node_modules/raphael/raphael-min.js"></script>
<script src="../assets/node_modules/morrisjs/morris.min.js"></script> -->
<!--c3 JavaScript -->
<!--<script src="../assets/node_modules/d3/d3.min.js"></script>-->
<!--<script src="../assets/node_modules/c3-master/c3.min.js"></script>-->
<!-- Popup message jquery -->
<!-- <script src="../assets/node_modules/toast-master/js/jquery.toast.js"></script> -->

<!-- <script src="../assets/node_modules/sweetalert/sweetalert.min.js"></script>
<script src="../assets/node_modules/sweetalert/jquery.sweet-alert.custom.js"></script> -->

<!-- Chart JS -->
<!--<script src="js/dashboard1.js"></script>-->
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<!-- <script src="../assets/node_modules/styleswitcher/jQuery.style.switcher.js"></script> -->
<script src="js/layer/layer.js"></script>
<script src="js/vue.js"></script>
<script type="text/javascript" src="js/wangEditor.js"></script>

<script src="js/config.js"></script><script src="js/extend.js"></script>
<!--<script src="js/headers.js"></script>-->
<!--<script src="js/Aside.js"></script>-->

<script>
    $(function () {
        var vw = new Vue({
            el: '#main-wrapper',
            // components:{header},
            data: {
                clientForm: {
                    essayTypeId:'',
                    title:'',
                    type: 1,
                    photos: 0,
                    originAuthor: '',
                    details: '',
                    author:'',
                    isDrafts: 0,
                    dynamicId: '',
                    pubState:true
                },
                form:{
                  address:''
                },
                rules:{

                },
                options:[],
                dialogFormVisible:false,
                formLabelWidth: '140px',
                industryList: [],
                loading: false,
                editor: null,
                layLoadId: '',
                status: 'insert', //状态分为新增, 编辑和查看详情   insert, edit, info
                id: "", //文章id 有则编辑 无则新增
                isDrafts: 0 //是否是草稿箱过来的 1是草稿箱,0不是草稿箱
            },
            mounted(){
                this.initEditor();
                let v = this;
                window.onunload = function() {
                    if (v.status !='info') {
                        v.clientForm.details = v.editor.txt.html();
                        localStorage.setItem('articles', JSON.stringify(v.clientForm));
                    }
                    return ;
                }

                this.id= $.formatParams(location.href).id || '';
                this.status= $.formatParams(location.href).status || '';
                this.isDrafts = $.formatParams(location.href).isDrafts || '';
                if(this.status === 'insert') {
                    let str = localStorage.getItem('articles');
                    if (str) {
                        try {
                            let info = JSON.parse(str);
                            this.clientForm = info;
                            this.clientForm.pubState = info.isDrafts == 0 ? true : false;
                        } catch (error) {
                            this.clientForm = {
                                title:'',
                                type: 1,
                                photos: 0,
                                originAuthor: '',
                                details: '',
                                author:'',
                                isDrafts: 1
                            }
                        }
                    }
                }
                if (this.id) {
                    this.getArticlesInfo();
                }
                this.queryAllType();
            },
            methods:{
                //链接转换
                submitData(){
                    const data = {
                        url: this.form.address
                    }
                    $.cAjax('/crmPc/customerEssay/reprintArticle',{data:data}).then(data => {

                        console.log(data)
                        this.dialogFormVisible = false;
                        this.clientForm = {
                            title: data.title,
                            type: 3,
                            photos: data.coverImg,
                            originAuthor: data.name,
                            details: data.body,
                            author: data.name  ,
                            isDrafts: 1
                        }
                        this.editor.txt.html(data.body);
                    }).catch(function (err) {
                        this.dialogFormVisible = false;
                    });
                },
                //按公司查询所有服务
                queryAllType(){
                    $.cAjax('/crmPc/essayType/queryAllType').then(data => {
                      this.options = data;
                    }).catch(function (err) {
                    });
                },
              initEditor() {
            var E = window.wangEditor;
            this.editor = new E(document.getElementById('editor'));
            window.editor = this.editor;
            /*    this.editor.customConfig.menus = [
                    'head',  // 标题
                    'bold',  // 粗体
                    'fontSize',  // 字号
                    'fontName',  // 字体
                    'italic',  // 斜体
                    'underline',  // 下划线
                    'strikeThrough',  // 删除线
                    'foreColor',  // 文字颜色
                    'backColor',  // 背景颜色
                    'link',  // 插入链接
                    'list',  // 列表
                    'justify',  // 对齐方式
                    'quote',  // 引用
                    'emoticon',  // 表情
                    'image',  // 插入图片
                    'table',  // 表格
                    'video',  // 插入视频
                    'code',  // 插入代码
                    'undo',  // 撤销
                    'redo'  // 重复
                ];*/
            this.editor.customConfig.uploadImgShowBase64 = true;
            this.editor.customConfig.pasteTextHandle = function(content) {

                if (content == '' && !content) return ''
                let str = content;
                str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '');
                str = str.replace('/(\\n|\\r| class=(")?Mso[a-zA-Z]+(")?)/g', '');
                let reg = new RegExp('<!--(.*?)-->', 'g')
                str = str.replace(reg, '');

                return str;
            }
            //插入图片回调
            this.editor.customConfig.linkImgCallback = function(url) {
                console.log(url) // url 即插入图片的地址
            };
            this.editor.customConfig.customUploadImg = function(files, insert) { //自选图片
                let formData = new FormData();
                formData.append('file', files[0]);

                $.uploadFile(formData).then(res => {
                this.editor.txt.html(this.editor.txt.html() + '<img style="max-width:100%;height:auto;display:block" src="' + $.baseFileUrl + '/' + res.data + '.primary.png" mode="widthFix"/>');
                })
            };
            this.editor.customConfig.onchange = (html) => {
                console.log(html);
                // this.quizData.quizTitle = html;
            }
            this.editor.create();
            },
            //取消
            cancel() {
                if (this.status !== 'info') {
                    layer.confirm(
                        '文章内容 还未保存是否关闭当前页面？',
                        {
                        skin: 'confirm-class',
                        btn: ['关闭', '保存']
                        },
                        idx => {
                        layer.close(idx);
                        localStorage.removeItem('articles');
                        window.location.href ="/main/articlesManage.html"
                        },
                        () => {
                        this.saveChange(1);
                        }
                    );
                }else {
                    localStorage.removeItem('articles');
                    window.location.href ="/main/articlesManage.html"
                }
            },

                getArticlesInfo() {
                    $.cAjax('/crmPc/companyGoods/getDynamicDetail', {
                        data: {
                            dynamicId: this.id
                        }
                    }).then(res=>{
                        this.clientForm = res;
                        this.editor.txt.html(res.details);
                    }, error=> {
                        console.log('info error', error);

                    })
                },
                saveChange(isDrafts){
                    this.clientForm.isDrafts = isDrafts;
                    this.clientForm.details = this.editor.txt.html();
                    let valid = this.validParams(this.clientForm);
                    if (valid) {
                        layer.alert(valid);
                        return;
                    };
                    this.layLoadId = layer.load();
                    if(this.loading) return;
                    this.loading = true;
                    $.cAjax('/crmPc/companyGoods/addDynamicInfo', {
                        data: this.clientForm,
                    }).then(res=>{
                        layer.alert('操作成功!');
                        layer.close(this.layLoadId);
                        this.loading=false;
                        localStorage.removeItem('articles');
                        location.href = "/main/articlesManage.html?isDrafts="+(this.isDrafts||0);
                    }, error=> {
                        layer.close(this.layLoadId);
                        localStorage.removeItem('articles');
                        this.loading=false;
                    }).catch(res=>{
                        localStorage.removeItem('articles');
                        layer.close(this.layLoadId);
                        this.loading=false;
                    })

                },
                validParams(info) {
                    if (!info.title) {
                        return "请填写文章标题."
                    }else if (!info.details) {
                        return "请填写文章内容."
                    }else if (!info.photos) {
                        return "请上传封面图."
                    }
                    return
                },
                delPic(clientForm) {
                    clientForm.photos = '';
                },
                upLoadLogo: function () {
                    var v = this;
                    var f = document.getElementById('file');
                    if(f.files[0].type!='image/png'&&f.files[0].type!='image/jpeg'&&f.files[0].type!='image/jpg'){
                        layer.alert("请选择png、jpg、jpeg格式的图片");
                        return
                    }
                    if(f.files[0].size/1024>1024*2){
                        layer.alert('请上传小于2M的图片！');
                        return
                    }

                    let formData = new FormData;
                    formData.append('file', f.files[0]);

                    $.uploadFile(formData).then(res=>{
                        f.value = '';
                        this.clientForm.photos  = $.baseFileUrl + '/' + res.data
                    });
                },
            },

        })
    })
</script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style type="text/css">
    .btncss{
        background-color: #51CDCB;
        border: 1px #51CDCB solid;
        color: white;
        margin-left: 20px;
    }
</style>
</body>

</html>












